import styled, { css } from "styled-components";

export const Wrapper = styled.div<{ multi: number; confirmed: number }>`
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  color: ${({ confirmed, multi }) =>
    multi ? (confirmed ? "blue" : "red") : "black"};
  z-index: 1;
  transition: 100ms;

  ${({ multi }) =>
    !multi
      ? ""
      : css`
          &:hover {
            cursor: pointer;
            background: grey;
            color: white;
            border-radius: 2px;
          }
        `}
`;
